<template>
  <v-layout wrap justify-center align-center>
    <v-flex md12 xs12 class="overflow-tab mb-3">
      <v-tabs v-model="tab" class="pos-abs" fixed-tabs color="transparent" slot="extension">
        <v-tabs-slider color="primary"></v-tabs-slider>
        <v-tab
          v-for="(item, index) in tabItems"
          :key="index"
          :href="`#${item.value}`"
          class="primary--text"
        >
          <span class="title">{{ item.text }}</span>
        </v-tab>
      </v-tabs>
    </v-flex>

    <v-flex md8>
      <v-tabs-items v-model="tab">
        <v-tab-item key="1" value="1">
          <v-layout wrap>
            <v-flex
              md12
              class="title"
              text-md-left
              py-3
            >Share to friend save while earning $5 cash for you both</v-flex>
            <v-flex md12 d-flex>
              <v-flex md8>
                <v-text-field solo v-model="inviteCode" id="invite-code"></v-text-field>
              </v-flex>
              <v-flex md2>
                <v-btn @click="onCopyCode" color="light-blue" dark>
                  <span>Copy</span>
                </v-btn>
              </v-flex>
            </v-flex>
          </v-layout>
        </v-tab-item>
        <v-tab-item key="2" value="2">
          <table class="table">
            <thead>
              <tr>
                <th v-for="(item, i) of memberHeaders" :key="item">{{ item }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, i) of memberData" :key="i">
                <td>{{ item.nickName }}</td>
                <td>{{ getTime(item.inviteTime) }}</td>
                <td>{{ item.level }}</td>
              </tr>
            </tbody>
          </table>
        </v-tab-item>
        <v-tab-item key="3" value="3">
          <table class="table">
      <thead>
        <tr>
          <th v-for="(item, i) of profitHeaders" :key="item">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) of profitData" :key="i">
          <td>{{ item.nickName }}</td>
          <td>$ {{ item.amount }}</td>
          <td>{{ item.level }}</td>
        </tr>
      </tbody>
    </table>
        </v-tab-item>
      </v-tabs-items>
    </v-flex>
  </v-layout>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Api, Login } from "@/api";
import Cookie from 'js-cookie';
import { getTime } from '@/utils/commonUtils';

declare const $Vue: Vue;

@Component
export default class ReferFriend extends Vue {
  private tab: any = '1';

  private inviteCode: string = '';

  private tabItems: any = [
    {
      text: "Refer a friend",
      value: '1'
    },
    {
      text: "Invite member list",
      value: '2',
    },
    {
      text: "Invite member profits",
      value: '3',
    },
  ];

  private profit = {
    my: 0,
    members: 0,
  }

  private memberData: any = [];
  private profitData: any = [];

  private memberHeaders: Array<string> = [
    'Member',
    'Amount',
    'Level'
  ];
  private profitHeaders: Array<string> = [
    'Member',
    'Profit',
    'Level'
  ];

  private getTime(ms: any) {
    return getTime(ms);
  }

  protected mounted() {
    this.getInvitationCode();
    this.getProfitMembers();
    this.getProfitAmount();
  }

  private onCopyCode() {
    let input: any = document.getElementById('invite-code');
    input.select();
    document.execCommand('Copy');
    $Vue.$emit('snackbar', {
      text: 'Copied!',
    });
  }
  /**
   * 获取我的二维码
   */
  private async getInvitationCode() {
    const params: any = {
      ticket: Cookie.get('p_token'),
    };

    const { data } = await Login.getInvitationCode.r(params);
    console.log('getInvitationCode', data);
    if (data.result === 0) {
      this.inviteCode = `${window.location.href.split('#')[0]}#/Register?invitation=${data.data}`;
    } else {

    }
  }


  private async getProfitAmount() {
    const params: any = {
    };
    const { data } = await Api.getProfitAmount.r(params);
    console.log("getProfitAmount", data);
    if (data.result === 0) {
      this.profit.my = data.data;
    } else {
      $Vue.$emit("snackbar", {
        text: data.message,
      });
    }
  }

  private async getProfitMembers() {
    const params: any = {
    };
    const { data } = await Api.getProfitMembers.r(params);
    console.log("getProfitMembers", data);
    if (data.result === 0) {
      this.profit.members = data.data.length;
      this.memberData = data.data;
      this.profitData = data.data;
    } else {
      $Vue.$emit("snackbar", {
        text: data.message,
      });
    }
  }

}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);
</style>


